<template>
  <div class="encrypt-route-form">
    <a-form ref="form" :model="formData" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="授权密码" name="secondary_password">
        <a-input-password v-model:value="formData.secondary_password" :placeholder="rules.secondary_password.message" />
      </a-form-item>
    </a-form>
    <div class="form-btn">
      <div class="forget" @click="forgetPassword">忘记密码？</div>
    </div>
  </div>
</template>

<script>
import { handleFormRes } from '../../utils/resolver.js';
import axios from '../../plugins/axios.js';
import { resetSecondPassword } from '../reset-password/index.js';

export default {
  name: 'encrypt-route-form',
  data() {
    return {
      formData: {},
      rules: {
        secondary_password: { required: true, message: '请输入授权密码' },
      },
      formOption: [
        {
          component: 'a-input',
          field: 'secondary_password',
          rules: { required: true, message: '请输入授权密码' },
          label: '授权密码',
          value: '',
          props: { type: 'password', placeholder: '请输入授权密码' },
        },
      ],
    };
  },
  methods: {
    forgetPassword() {
      resetSecondPassword();
    },
    async onOk() {
      const valid = await this.$refs.form.validate();
      if (!valid) return false;
      return await handleFormRes(
        axios.get('/xw-microservice/xw-system/v3/user/verifySecondaryPassword', {
          params: this.formData,
        })
      );
    },
  },
};
</script>

<style lang="less">
.encrypt-route-form {
  padding: 20px;
  .form-btn {
    position: relative;
    width: 100%;
    padding: 15px 0;
    //border-top: 1px solid rgba(255, 255, 255, 0.1);
    //text-align: center;
    .forget {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 20px;
      height: 1em;
      margin: auto;
      color: rgba(132, 255, 237, 0.75);
      cursor: pointer;
    }
  }
}
</style>
